<template>
	<view class="page">
		<view class="weui-page__back">
			<image src="https://img.2024csnl.com/static/2.x/a38.png" mode="widthFix"></image>
		</view>
		<view class="hot-link">
			<view
				v-for="(item, index) in hotLink"
				:key="index"
				class="item">
				<view
					class="cell"
					@click="onSkip(item.url)">
					<view class="icon">
						<image :src="item.icon" mode=""></image>
					</view>
					<view class="label">
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="quick-box">
			<view class="thead">
				<view class="title">
						<text>快速入门</text>
				</view>
			</view>
			<view class="tbody">
				<view class="list">
					<view
						v-for="(item, index) in quickList"
						:key="index"
						class="item">
						<view class="cell">
							<view class="icon">
								<image :src="item.icon" mode=""></image>
							</view>
							<view class="name">
								<text>{{ item.name }}</text>
							</view>
							<view
								class="btn"
								@click="onSkip(item.url)">
								<text>去试试</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="common-problem">
			<view class="thead">
				<view class="title">
						<text>常见问题</text>
				</view>
			</view>
			<view class="tbody">
				<view class="list">
					<view
						v-for="(item, index) in tableData3"
						:key="index"
						class="item">
						<ProblemItem :dataobj="item"></ProblemItem>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		getArticle,
		getEquity,
		getSlideshow,
		getAnnouncement,
		getHotMerchant
	} from "@/api/index.js"
	import ProblemItem from './problem-item.vue'
	
	export default {
		components: {
			ProblemItem
		},
		data() {
			return {
				hotLink: [
					{
						url: '/package/we/pages/article-list/list?cid=13',
						icon: 'https://img.2024csnl.com/static/2.x/a59.png',
						name: '了解逆伶'
					},
					{
						url: '/package/we/pages/article-list/list?cid=14',
						icon: 'https://img.2024csnl.com/static/2.x/a60.png',
						name: '逆伶产品'
					},
					{
						url: '/package/we/pages/article-list/list?cid=15',
						icon: 'https://img.2024csnl.com/static/2.x/a61.png',
						name: '商家案例'
					},
					{
						url: '/package/we/pages/article-list/list?cid=16',
						icon: 'https://img.2024csnl.com/static/2.x/a62.png',
						name: '百问百答'
					},
					{
						url: '/package/we/pages/article-list/list?cid=17',
						icon: 'https://img.2024csnl.com/static/2.x/a63.png',
						name: '逆伶物料'
					},
					{
						url: '/package/we/pages/article-list/list?cid=18',
						icon: 'https://img.2024csnl.com/static/2.x/a64.png',
						name: '新人启航'
					},
					{
						url: '/package/we/pages/article-list/list?cid=19',
						icon: 'https://img.2024csnl.com/static/2.x/a65.png',
						name: '解决方案'
					},
					{
						url: '/package/we/pages/material-center/index',
						icon: 'https://img.2024csnl.com/static/2.x/a66.png',
						name: '素材中心'
					}
				],
				quickList: [
					{
						url: '/pages/goods/shop-mall',
						icon: 'https://img.2024csnl.com/static/2.x/a67.png',
						name: '如何下单'
					},
					{
						url: '/pages/tab/invitation',
						icon: 'https://img.2024csnl.com/static/2.x/a68.png',
						name: '分享商品'
					},
					{
						url: '/package/mine/myOrderList/myOrderList?type=3',
						icon: 'https://img.2024csnl.com/static/2.x/a69.png',
						name: '售后处理'
					},
					{
						url: '/business/pages/business_tab/balanceWithdrawal?pageType=%E4%BD%99%E9%A2%9D%E6%8F%90%E7%8E%B0',
						icon: 'https://img.2024csnl.com/static/2.x/a70.png',
						name: '余额提现'
					}
				],
				problemList: [
					{
						title: '充值是否收费？',
						content: '值对出借人是免费的，手续费由平台承担。充值对出借人是免费的，手续费由平台承担。'
					},
					{
						title: '充值是否收费？',
						content: '值对出借人是免费的，手续费由平台承担。充值对出借人是免费的，手续费由平台承担。'
					},
					{
						title: '充值是否收费？',
						content: '值对出借人是免费的，手续费由平台承担。充值对出借人是免费的，手续费由平台承担。'
					}
				],
				tableData3: []
			}
		},
		created () {
			this.getArticleClassify()
			this.getArticleData()
			// this.onReqGetEquity()
			// this.onGetSlideshow()
			// this.onGetPublicity()
			// this.onGetAnnouncement()
		},
		methods: {
			// 商学院下的子分类
			async getArticleClassify () {
				const res = await getArticle('s=/ApiArticle/getartclasslist', {
					cid: 12
				})
				const { data, status, msg } = res.data
				if (status == 1) {
					this.tableData3 = data
				} else {
					this.showToast(msg)
				}
			},
			// 商学院的栏目数据
			async getArticleData () {
				const res = await getArticle('s=/ApiArticle/getartlist', {
					cid: 12
				})
				const { data, status, msg } = res.data
				if (status == 1) {
					this.tableData3 = data
				} else {
					this.showToast(msg)
				}
			},
			// 列表
			async onGetAnnouncement() {
				const res = await getAnnouncement('s=/ApiIndex/appnotice')
				const { data, status, msg } = res.data
				if (status == 1) {
					this.noticeList = data
				} else {
					this.showToast(msg)
				}
			},
			async onGetSlideshow() {
				let res = await getSlideshow('s=/ApiIndex/banner')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.swiperList = data
				} else {
					this.showToast(msg)
				}
			},
			async onReqGetEquity() {
				const res = await getEquity('s=/ApiIndex/recomgoods')
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.equityList = data
				} else {
					this.showToast(msg)
				}
			},
			async onGetPublicity() {
				const res = await getPublicity(`s=ApiIndex/navigationphone`)
				const {
					data,
					status,
					msg
				} = res.data
				if (status == 1) {
					this.publicityList = data
				} else {
					this.showToast(msg)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.page {
		min-height: 100vh;
		background: #f8f8f8;
	}
	
	.hot-link {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background: #ffffff;
		border-radius: 20rpx;
		position: relative;
		top: 120rpx;
		margin: 0 30rpx 120rpx;
		.item {
			width: 25%;
		}
		.cell {
			position: relative;
			text-align: center;
			margin: 20rpx;
		}
		.icon {
			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.label {
			height: 40rpx;
			line-height: 40rpx;
		}
	}
	
	.quick-box {
		padding: 0 20rpx 20rpx;
		background: #fff;
		margin: 150rpx 30rpx 30rpx;
		border-radius: 20rpx;
		.thead {
			padding: 0 ;
			border-bottom: 1px solid #eeeeee;
			.title {
				line-height: 100rpx;
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
			}
		}
		.tbody {
			.list {
				margin: 30rpx 0;
			}
			.item {}
			.cell {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
			}
			.icon {
				image {
					display: block;
					width: 40rpx;
					height: 40rpx;
				}
			}
			.name {
				flex: 1;
				line-height: 40rpx;
				font-size: 28rpx;
				margin: 0 20rpx;
				color: #333;
			}
			.btn {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 30rpx;
				border-radius: 60rpx;
				font-size: 28rpx;
				color: #ffffff;
				background: -webkit-linear-gradient(left, #41644A, #263A29);
			}
		}
	}
	
	.common-problem {
		padding: 0 20rpx 20rpx;
		background: #fff;
		margin: 20rpx 30rpx 30rpx;
		border-radius: 20rpx;
		.thead {
			padding: 0 ;
			border-bottom: 1px solid #eeeeee;
			.title {
				line-height: 100rpx;
				font-size: 30rpx;
				color: #000;
				font-weight: bold;
			}
		}
		.tbody {
			.list {
				margin: -1px 0 0;
			}
			.item {}
		}
	}
</style>
